<template>
    <div class="drawer-layoutsx">
    <el-drawer
      ref = "allocation"
      :visible.sync="drawer"
      size="85%"
      :with-header="false"
      :wrapperClosable="false"
    >
    <div style="position: relative">
      <div class="drawerTitle">
        <span>{{detailTitle}}</span>
        <div class="close" @click="closedinvitation">
          <i class="el-icon-close" style="font-size: 24px;" />
        </div>
      </div>
    </div>
    <div style="padding: 10px 20px;"  v-loading="loading">
        <el-form ref="allocationform" :model="formData" :rules="formRules" inline >
            <el-table :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
            }" ref="drawertable" border :data="formData.check" style="width: 100%;height:100%">
            <el-table-column label="岗位级别" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column  label="月新增成员数" align="center" width="110">
                <template slot-scope="scope">
                    <el-col  style="margin-top:10px">
                        <el-form-item  :prop="`check.${scope.$index}.user_total_num`" :rules="formRules.newFieldName">
                            <el-input-number  size="mini" style="width:100px;" controls-position="right"  v-model.number="scope.row.user_total_num"
                            :min="0" :max="100000" label=""></el-input-number>
                        </el-form-item>
                    </el-col>
                </template>
            </el-table-column>

            <el-table-column  label="月成交订单数" align="center" width="130">
                <template slot-scope="scope">
                    <el-col style="margin-top:10px">
                        <el-form-item :prop="`check.${scope.$index}.order_pay_num`" :rules="formRules.newFieldName">
                            <el-input-number  size="mini" style="width:110px" controls-position="right"  v-model.number="scope.row.order_pay_num"
                            :min="0" :max="100000" label=""></el-input-number>
                        </el-form-item>
                    </el-col>
                </template>
            </el-table-column>

            <el-table-column  label="月退单数"  align="center" width="130">
                <template slot-scope="scope">
                    <el-col style="margin-top:10px">
                        <el-form-item :prop="`check.${scope.$index}.order_refund_num`" :rules="formRules.newFieldName">
                            <el-input-number  size="mini" style="width:110px" controls-position="right"  v-model.number="scope.row.order_refund_num"
                            :min="0" :max="100000" label=""></el-input-number>
                        </el-form-item>
                    </el-col>
                </template>
            </el-table-column>

            <el-table-column label="月销售成交额" align="center" width="130">
                <template slot-scope="scope">
                    <el-col style="margin-top:10px">
                        <el-form-item :prop="`check.${scope.$index}.order_pay_money`" :rules="formRules.moneynumber">
                            <el-input-number  size="mini" style="width:110px" controls-position="right"  v-model.number="scope.row.order_pay_money"
                            :min="0" :max="100000" label=""></el-input-number>
                        </el-form-item>
                    </el-col>
                </template>
            </el-table-column>

            <el-table-column  label="月实际成交额" align="center" width="130">
                <template slot-scope="scope">
                    <el-col style="margin-top:10px">
                        <el-form-item :prop="`check.${scope.$index}.order_actual_money`" :rules="formRules.moneynumber">
                            <el-input-number  size="mini" style="width:110px" controls-position="right"  v-model.number="scope.row.order_actual_money"
                            :min="0" :max="100000" label=""></el-input-number>
                        </el-form-item>
                    </el-col>
                </template>
            </el-table-column>

            <el-table-column  label="直推人数" align="center" width="130">
                <template slot-scope="scope">
                    <el-col style="margin-top:10px">
                        <el-form-item :prop="`check.${scope.$index}.user_total_num1`" :rules="formRules.newFieldName">
                            <el-input-number  size="mini" style="width:110px" controls-position="right"  v-model.number="scope.row.user_total_num1"
                            :min="0" :max="100000" label=""></el-input-number>
                        </el-form-item>
                    </el-col>
                </template>
            </el-table-column>

            <el-table-column  label="间推人数" align="center" width="130">
                <template slot-scope="scope">
                    <el-col style="margin-top:10px">
                        <el-form-item :prop="`check.${scope.$index}.user_total_num2`" :rules="formRules.newFieldName">
                            <el-input-number  size="mini" style="width:100px" controls-position="right" v-model.number="scope.row.user_total_num2"
                            :min="0" :max="100000" label=""></el-input-number>
                        </el-form-item>
                    </el-col>
                </template>
            </el-table-column>

            <el-table-column  label="现金奖励" align="center" width="120">
                <template slot-scope="scope" >
                    <el-col style="margin-top:10px">
                        <el-form-item :prop="`check.${scope.$index}.award_balance`" :rules="formRules.moneynumber">
                            <el-input-number :min="0" :max="100000"  style="width:100px" size="mini" controls-position="right"  v-model="scope.row.award_balance" ></el-input-number>
                        </el-form-item>
                    </el-col>
                </template>
            </el-table-column>
            <el-table-column  label="奖励积分" align="center" width="120" >
                <template slot-scope="scope">
                    <el-col style="margin-top:10px">
                        <el-form-item :prop="`check.${scope.$index}.award_integral`" :rules="formRules.moneynumber">
                            <el-input-number :min="0" :max="100000" style="width:100px" size="mini" controls-position="right" v-model="scope.row.award_integral" ></el-input-number>
                        </el-form-item>
                    </el-col>
                </template>
            </el-table-column>

            <el-table-column  label="奖励提货券" align="center" width="120" >
                <template slot-scope="scope">
                    <el-col style="margin-top:10px">
                        <el-form-item :prop="`check.${scope.$index}.award_voucher`" :rules="formRules.moneynumber">
                            <el-input-number  :min="0" :max="100000" style="width:100px" size="mini" controls-position="right" v-model="scope.row.award_voucher" ></el-input-number>
                        </el-form-item>
                    </el-col>
                </template>
            </el-table-column>

            <el-table-column  label="奖励转化卡"  align="center" width="190" >
                <template slot-scope="scope">
                    <el-col style="margin-top:10px">
                        <el-form-item :prop="`check.${scope.$index}.award_point_card_num`" :rules="getValidationRules(scope.row.award_point_card_type)">
                            <el-input style="width:170px" :min="0" :max="100000"  size="mini" controls-position="right" v-model="scope.row.award_point_card_num" >
                                <el-select style="width:100px" v-model="scope.row.award_point_card_type" slot="append" placeholder="请选择">
                                    <el-option label="数字" :value="1"></el-option>
                                    <el-option label="百分比%" :value="2"></el-option>
                                </el-select>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </template>
            </el-table-column>

            <el-table-column  label="转换卡有效期" :fixed="allocation_type===1?'':'right'"  align="center" width="120" >
                <template slot-scope="scope">
                    <el-col style="margin-top:10px">
                        <el-form-item >
                            <el-input-number :min="0" :max="10000" style="width:100px" size="mini" controls-position="right" v-model="scope.row.award_point_card_expire" ></el-input-number>
                        </el-form-item>
                    </el-col>
                </template>
            </el-table-column>

            <el-table-column v-if="allocation_type===1"  label="降级处罚" align="center" width="90" >
                <template slot-scope="scope">
                    <el-col style="margin-top:10px">
                        <el-form-item >
                            <el-switch  v-model="scope.row.punish_down_role_status" :active-value="1" :inactive-value="0"/>
                        </el-form-item>
                    </el-col>
                </template>
            </el-table-column>

            <el-table-column v-if="allocation_type===1"  label="解除处罚" align="center" width="90" >
                <template slot-scope="scope">
                    <el-col style="margin-top:10px">
                        <el-form-item >
                            <el-switch  v-model="scope.row.punish_stop_cooperation_status" :active-value="1" :inactive-value="0"/>
                        </el-form-item>
                    </el-col>
                </template>
            </el-table-column>

            <el-table-column v-if="allocation_type===1"  label="现金处罚" align="center" width="120" >
                <template slot-scope="scope">
                    <el-col style="margin-top:10px">
                        <el-form-item :prop="`check.${scope.$index}.punish_balance`" :rules="formRules.moneynumber">
                            <el-input-number :min="0" :max="100000" size="mini" style="width:100px" controls-position="right" v-model="scope.row.punish_balance" ></el-input-number>
                        </el-form-item>
                    </el-col>
                </template>
            </el-table-column>

            <el-table-column v-if="allocation_type===1" fixed="right"  label="其他处罚" align="center" width="180" >
                <template slot-scope="scope">
                    <el-col style="margin-top:10px">
                        <el-form-item >
                            <el-input size="mini"  v-model="scope.row.punish_other" ></el-input>
                        </el-form-item>
                    </el-col>
                </template>
            </el-table-column>

            </el-table>
        </el-form>

        <el-row style="margin: 50px 0;text-align:center">
            <el-col :span="24" >
                <el-button  size="medium" type="primary"  @click="submitForms()" >确认</el-button>
                <el-button size="medium" @click="resetform()">重置</el-button>
            </el-col>
        </el-row>

    </div>
    </el-drawer>
</div>
</template>

<script>

import { roleRulelist,roleRuleedit,roleAwardlist,roleAwardedit } from "@/api/manager/index"
    export default {
        name:'allocation',
        props: ["detailTitle","allocation_type",],
        components: {

        },
        data(){
            return {
                //表单校验
                formRules:{
                    moneynumber: [{
                        required: false,
                        validator: (rule, value, callback) => {
                        let req = /^\d+(\.\d{1,2})?$/;
                        if (req.test(value)) {
                            if (Number(value) > 99999999) {
                            return callback(new Error("金额不能大于99999999"));
                            }
                            callback();
                        } else {
                            callback(new Error("保留两位小数"));
                        }
                        },
                        trigger: "change",
                    }, ],
                    newFieldName: [{
                        required: false,
                        validator: (rule, value, callback) => {
                        let req = /^\d+$/;
                        if (req.test(value)) {
                            callback();
                        } else {
                            callback(new Error("请输入正整数"));
                        }
                        },
                        trigger: "change",
                    }],
                },
                drawer:true,
                loading:false,
                //table数据
                formData: {
                    check:[]
                },

            }
        },
        created() {
            if(this.allocation_type==1) {
                this.roleCheck()
            }else if(this.allocation_type==2){
                this.gitrolereward()
            }else{
                
            }

        },
        mounted() {

        },
        methods: {
            //转换卡类型校验
            getValidationRules(cardType) {
                if (cardType === 1) {
                    return [
                    {
                        required: false,
                        validator: (rule, value, callback) => {
                        if (value !== '' && !/^\d+$/.test(value)) {
                            callback(new Error("请输入正整数"));
                        } else {
                            callback();
                        }
                        },
                        trigger: "change"
                    }
                    ];
                } else if (cardType === 2) {
                    return [
                    {
                        required: false,
                        validator: (rule, value, callback) => {
                        if (value !== '' && !/^\d+(\.\d{1,2})?$/.test(value)) {
                            callback(new Error("最多两位小数"));
                        } else if (Number(value) > 100) {
                            callback(new Error("百分比不能超过100"));
                        } else {
                            callback();
                        }
                        },
                        trigger: "change"
                    }
                    ];
                } else {
                    return [];
                }
                },
            //获取考核指标
            roleCheck() {
                this.loading = true;
                roleRulelist().then((res) =>{
                if (res.code == 200) {
                this.loading = false;

                    let arr = res.data
                    this.formData.check = JSON.parse(JSON.stringify(arr))
                    this.formData.check.forEach((item) => {
                    if (item.award_point_card_type === '') {
                        item.award_point_card_type = 1;
                    }
                    });
                }else{
                    this.$messages.error(res.msg);
                    return;
                }
                })
            },
            //获取奖励配置
            gitrolereward() {
                this.loading = true;
                roleAwardlist().then((res) =>{
                    if (res.code == 200) {
                    this.loading = false;
                    let arr = res.data
                    this.formData.check = JSON.parse(JSON.stringify(arr))
                    this.formData.check.forEach((item) => {
                    if (item.award_point_card_type === '') {
                        item.award_point_card_type = 1;
                    }
                    });
                }else{
                    this.$messages.error(res.msg);
                    return;
                }
                })
            },
            // 提交
            submitForms() {
                this.$refs.allocationform.validate((valid) => {
                if (valid) {
                    if(this.allocation_type==1) {//保存考核指标
                        roleRuleedit({rule:this.formData.check}).then(res=>{
                        if (res.code !== 200 || res.status !== 1) {
                            return this.$messages.error(res.msg);
                        }
                        this.$messages.success(res.msg);
                       this.$parent.closeallocation();
                                }).catch((error) => {
                        this.$message.error(res.msg);
                        });
                    }else{//保存奖励条件
                        roleAwardedit({rule:this.formData.check}).then(res=>{
                        if (res.code !== 200 || res.status !== 1) {
                            return this.$messages.error(res.msg);
                        }
                        this.$messages.success(res.msg);
                        this.$parent.closeallocation();
                                }).catch((error) => {
                        this.$message.error(res.msg);
                        });

                    }




                }else {
                    return false;
                }
            })
        },
         //重置按钮
         resetform(){
            if(this.allocation_type==1) {
                this.roleCheck()
            }else{
                this.gitrolereward()
            }
        },
            //关闭抽屉
            closedinvitation() {
                this.$parent.closeallocation();
            }

        }
    }
</script>
<style lang="scss" scoped>
</style>
